<template>
 <!-- <div> -->
  <header class="header" >
  
   <!-- <div class="header__back" @click="goBack"></div> -->
   <div class="header-back" @click="goBack"><van-icon name="arrow-left" /></div>
   <div class="header__title">{{ title }}</div>
   <div class="header__right"></div>
   <slot></slot>
  </header>
 <!-- </div> -->
</template>
<script>
export default {
 props: {
  title: {
   type: String,
   default: "",
  },

 },
 methods: {
  
  goBack() {
    this.$router.go(-1);
      
  },
 },
};
</script>
<style lang="scss" scoped>
.header {
        height: 44px;
    background: rgba(23, 119, 255, 1);
 //old
 position: relative;
 padding: 10px 0;
 display: flex;
 justify-content: space-between;
 align-items: center;

 .van-icon{
//    color: #1A1A1A;
color: #ffffff;
   font-size: 12px !important;
 }
//  &__back {
//   width: 10px;
//   height: 18px;
//   background-image: url(../assets/header/back.png);
//   background-size: cover;
//   position: absolute;
//   left: 16px;
//   &::after {
//    content: "";
//    display: block;
//    width: 30px;
//    height: 30px;
//    position: absolute;
//    left: -10px;
//    top: -6px;
//    background: transparent;
//    z-index: 2;
//   }
//  }

 &__title {
  // font-family: PingFangSC, PingFangSC-Medium;
  font-family:"SimHei";
  color: rgba(255, 255, 255, 1);
font-size: 18px;
//   font-weight: 700;
  text-align: center;
//   color: #1A1A1A;
  line-height: 20px;
  width: 100%;
 }
}

</style>
